<template>
	<view>
		<view class="color-text font-b">基础cell</view>
		<JkListCellWrapper :hasborder="false">
			<JkListCell :listCellIcon="'icon-safe'" :listCellTitle="'这是标题'" :listCellLink="'这是link'" @click="clickFunc"></JkListCell>
		</JkListCellWrapper>

		<view class="color-text font-b">隐藏左边图标/隐藏右边箭头</view>
		<JkListCellWrapper :hasborder="false">
			<JkListCell :listCellTitle="'这是标题'" :listCellLink="'这是link'" :hasRightArrow="false" @click="clickFunc"></JkListCell>
		</JkListCellWrapper>

		<view class="color-text font-b">带外层border的cell</view>
		<JkListCellWrapper :hasBorder="true">
			<JkListCell :listCellIcon="'icon-safe'" :listCellTitle="'这是标题'" :listCellLink="'这是link'" :hasBorderBottom="false"
			 @click="clickFunc"></JkListCell>
			<JkListCell :listCellIcon="'icon-safe'" :listCellTitle="'这是标题'" :listCellLink="'这是link'" @click="clickFunc"></JkListCell>
		</JkListCellWrapper>

		<view class="color-text font-b">带底部border的cell</view>
		<JkListCellWrapper :hasborder="true">
			<JkListCell :listCellIcon="'icon-safe'" :listCellTitle="'这是标题'" :listCellLink="'这是link'" :hasBorderBottom="true"
			 @click="clickFunc"></JkListCell>
			<JkListCell :listCellIcon="'icon-safe'" :listCellTitle="'这是标题'" :listCellLink="'这是link'" :hasBorderBottom="false"
			 @click="clickFunc"></JkListCell>
		</JkListCellWrapper>
	</view>
</template>

<script>
	import JkListCell from '@/components/jk-list-cell/jk-list-cell.vue'
	import JkListCellWrapper from '@/components/jk-list-cell/jk-list-cell-wrapper.vue'
	export default {
		components: {
			JkListCell,
			JkListCellWrapper
		},
		methods: {
			clickFunc() {
				uni.showToast({
					duration: 2000,
					title: '点击反馈'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.color-text {
		margin: 32rpx;
	}
</style>
